import React from 'react';
import ReactEcharts from 'echarts-for-react';
// import './echarts.scss';
import styled from 'styled-components'

// 样式
const SectionOne= styled.div<{widthPX?:string}>` //这里要定义参数类型！！！！
  width: ${(p)=> p.widthPX};
`

type props = {
 width: string
}

const Line = (props:props)=>{
 function getOption() {
    return {
      title: {
        text: '',
        show: false
        // text: "图表测试"
      },
      legend: {
        data: ['销量'],
        // data: [{ name: 'T1探头', icon: 'rect' }, { name: 'T2探头' }],
        top: '5%', //距上边距 还有属性为 距下边距 距左边距 距右边距
        orient: 'vertical', //竖直对齐
        textStyle: {
          //图例文字的样式
          color: 'white'
        }
      },
      xAxis: {
        data: [
          '10/10',
          '10/11',
          '10/12',
          '10/13',
          '10/14',
          '10/15',
          '10/16',
          '10/17',
          '10/18',
          '10/19',
          '10/20'
        ]
      },
      yAxis: {
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed'
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      series: [
        {
          name: '数量',
          type: 'line',
          data: [50, 30, 20, 40, 60, 70, 50, 20, 40, 60, 80],
          itemStyle: {
            normal: {
              lineStyle: {
                width: 2, //调整 线条的宽度  5已经很宽啦
                color: 'rgba(24,144,255,0.85)' //线条颜色
              },
              color: 'rgba(24,144,255,0.85)' //折线拐点的颜色
            }
          },
          // smooth: true,//是否平滑过渡
          showSymbol: true,
          symbol: 'circle', //设定为实心点
          symbolSize: 7, //设定实心点的大小
          hoverAnimation: true,
          animation: false
        }
      ],

      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'none',
          snap: true
        },
        //show: true,   //default true
        showDelay: 0, //显示延时，添加显示延时可以避免频繁切换
        hideDelay: 50, //隐藏延时
        transitionDuration: 0, //动画变换时长
        // backgroundColor: 'rgba(0,0,0,0.7)',//背景颜色（此时为默认色）
        backgroundColor: '#fff', //背景颜色（此时为默认色）
        textStyle: {
          //图例文字的样式
          color: '#666666'
        },
        extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);', //悬浮窗阴影
        borderRadius: 4, //边框圆角
        padding: [5, 10], // [5, 10, 15, 20] 内边距
        position: function (p: any) {
          // 位置回调
          // console.log && console.log(p);
          return [p[0] + 10, p[1] - 10];
        }
      }
    };
  }
  // const widthPX = props.width
    return (
  <SectionOne widthPX={props.width}> 
        <ReactEcharts
        option={getOption()}
        notMerge={true}
        lazyUpdate={true}
        opts={{renderer: 'svg'}}
        className="pd-panel-lint-chart"
      />
   </SectionOne>
    );

}

export default Line;
